<template>
  <!-- div.container>div.box>header.header+div.content -->
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
          
      <keep-alive include="home">
        <router-view></router-view>
      </keep-alive>
      <!-- <router-view></router-view> -->
    <footer class="footer"  v-if="!$route.meta.hidden" >
      <!-- <ul>
        <li @click="$router.push('/home')" >
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </li>
     
  
        <li @click="$router.push('/kind')">
          <span class="iconfont icon-fenlei"></span>
          <p>分类</p>
        </li>

        <li @click="$router.push('/cart')">
          <span class="iconfont icon-24gl-cartFull6"></span>
          <p>购物车</p>
        </li>

        <li @click="$router.push('/user')">
          <span class="iconfont icon-userplus-fill"></span>
          <p>我的</p>
        </li>
      </ul> -->
    <van-tabbar v-model="$store.state.active"  active-color="#ee0a24"   >
          
        <van-tabbar-item icon="wap-home" @click="$router.push('/home')" >首页</van-tabbar-item>
        <van-tabbar-item icon="wap-nav" @click="$router.push('/kind')" >分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart" @click="$router.push('/cart')" >购物车</van-tabbar-item>
        <van-tabbar-item icon="manager" @click="$router.push('/user')" >我的</van-tabbar-item>
    </van-tabbar>


    </footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>


<script>
import Vue from 'vue'
import { Tabbar, TabbarItem  } from 'vant';
// import {mapState} from "vuex"


Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  data() {
    return {
      active:0
    }
  },
  computed:{
    // ...mapState({
    //   loginState:state => state.loginState
    // })
  },
  mounted(){
 
    
  }
}
</script>



<!--  cnpm i stylus-loader stylus -S  -->
<style lang="stylus">

html, body, .container{
  height: 100%
}

// 设置rem的基准值
html {
  // font-size 100px // 1rem = 100px
// 如果设计稿是以 iphone6 为基础设计的，那么 设置为  100 / 375 * 100 = 26.6666666vw
// 如果设计稿是以 iphone5 为基础设计的，那么 设置为  100 / 320 * 100 = 31.25vw
font-size 26.6666666vw // +++++++++++++++++++++++++++++++++++++++++
}
@media all and (min-width 960px){
  html{
   font-size 100px
}
} 



// 重置页面中的字体大小
body{
  font-size: 12px  // 取决于设计稿中的最小的使用最多的字体的大小
}
// 移动端布局主要使用弹性盒布局
.container {
  display: flex
  flex-direction: column
  // 设置两边留白 
  max-width 1080px
  margin 0 auto
  overflow: auto
  .box{
    flex: 1
    display: flex
    flex-direction: column
    overflow: auto
    .header{
      height: 0.44rem
      // background-color: #ff6666
    }
     .content{
             flex 1
      overflow  auto // 内容高度大于目前屏幕的高度产生滚动条
     }

  }
  .footer{
    height 0.5rem
    background-color #efefef
    .van-tabbar{
      height 0.5rem
    }

    ul{
      display: flex
      list-style: none
      margin: 0
      padding: 0
      height: 100%
      li{
        flex: 1
        height 100%
        display flex
        flex-direction column
        justify-content center
        align-items center
        active{
          color #f66
        }
        span{
          font-size 0.20rem
        }
        p{
          font-size 12px
          margin 0
          margin-top  5px
        }
      }
     
         
    }
  }
    
}

.tip{
  position: fixed
  top 0
  left  0
  right 0
  bottom  0
  font-size 30px
  font-weight bold
  display: none
  justify-content: center
  align-items: center
}

@media all and (orientation landscape) {
  .tip {
    display flex
  }
}


</style>
